<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FreeEngine_文件下载</title>
</head>

<style>

    html, body {
        height: 100%;
    }

    .btn_download:hover{
        cursor: pointer;
        background-color: 	gray;
    }

</style>

<body>
    
    
    <div style="width: 400px; margin: auto;height: 5%; text-align: center;">文件列表</div>
    <div style="width: 400px; height: 50%; margin: auto;">
        <div id="div_file_list" style="border: 1px solid black; border-radius: 5px; height: 50%;
        background-color: aliceblue;padding-bottom: 20px;overflow-y: scroll;">

            <div style="margin: 10px; padding: 0 10px;">
                <span>文件名</span>
                <span class="btn_download" style="float: right;border: 1px solid gray;
                padding: 2px;
                border-radius: 5px;">下载</span>
            </div>

            <div style="margin: 10px; padding: 0 10px;">
                <span>文件名</span>
                <span class="btn_download" style="float: right;border: 1px solid gray;
                padding: 2px;
                border-radius: 5px;">下载</span>
            </div>

            <div style="margin: 10px; padding: 0 10px;">
                <span>文件名</span>
                <span class="btn_download" style="float: right;border: 1px solid gray;
                padding: 2px;
                border-radius: 5px;"
                fileName="aa"
                onclick="downloadFile(this)">下载</span>
            </div>

        </div>
    </div>

</body>

<script>

    var downloadFile = {
        id: -1,
        name: "-",
        size: 0,
        filePath: "-"
    }
    var requestHost = window.location.host;
    var downloadFileListQuery = "http://" + requestHost + "/download/fileListQuery";
    var downloadFileQuery = "http://" + requestHost + "/download/fileQuery?filePath=";
    var downloadHost = "http://" + requestHost + "/download/file?filePath=";


</script>

<script>

    window.onload = function(){
        // 查询可下载文件列表
        var ajax = new XMLHttpRequest();
        console.log("query file list...");
        ajax.open('get',downloadFileListQuery);
        ajax.send();
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                console.log(ajax.responseText);
                var fileList = JSON.parse(ajax.responseText);
                paddingHTMLContent("div_file_list", generateDownloadListHTML(fileList));
            }
        }
    };

    function generateDownloadListHTML(data){
        var paddignContent = "";
        for(i = 0; i < data.length; i++){
            paddignContent += ('<div style="margin: 10px; padding: 0 10px;word-break: ">'
                            + '<span style="word-break: break-all;">' + data[i].name + "</span>"
                            + '<span class="btn_download" style="float: right;border: 1px solid gray;padding: 2px;border-radius: 5px;"'
                            + 'filePath="' + data[i].filePath + '" ' 
                            + 'fileName="' + data[i].name + '" ' 
                            + 'onclick="downloadFile(this)">下载</span></div>');
        }

        return paddignContent;
    }

    function paddingHTMLContent(id, content){
        document.getElementById(id).innerHTML = content;
    }

    function downloadFile(e){
        console.log(e.getAttribute("fileName"));
        console.log(e.getAttribute("filePath"));

        var fileName = e.getAttribute("fileName");
        var filePath = e.getAttribute("filePath");

        var ajax = new XMLHttpRequest();
        console.log("query file...");
        ajax.open('get', downloadFileQuery + filePath);
        ajax.send();
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                console.log(ajax.responseText);
                if(ajax.responseText == "yes"){
                    console.log("file exist");
                    var aEle = document.createElement("a");// 创建a标签
                    aEle.download = fileName;// 设置下载文件的文件名
                    aEle.href = downloadHost + filePath;
                    aEle.click();// 设置点击事件
                }else {
                    window.alert("文件不存在了, 请刷新");
                }
            }
        }
    }


</script>

</html>